<script setup lang="ts">
import { ref } from 'vue'

const saleData = ref({
	c_au_dt: "2024-07-20 14:14:15.180",
	c_gname: "111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111",
	c_deduct_rate: 10,
	c_sale_amt: 100,
	c_sale_qty: 10,
	c_sale_unit_price: 10,
	c_status: "正常销售,,,暂停进货",
});

const datacolSpanItems = [
	{
		label: "销售日期",
		prop: "c_au_dt",
		type: "text",
		colSpan: 12,
		element: {
			mode: "YYYY-MM-DD",
		},
	},
	{
		label: "商品名称",
		prop: "c_gname",
		type: "text",
		colSpan: 12,
		element: {
		},
	},
	{
		label: "扣率",
		prop: "c_deduct_rate",
		type: "text",
		colSpan: 12,
		element: {
			precision: 2,
		},
	},
	{
		label: "销售金额",
		prop: "c_sale_amt",
		type: "text",
		colSpan: 12,
		element: {
			precision: 2,
		},
	},
	{
		label: "销售数量",
		prop: "c_sale_qty",
		type: "text",
		colSpan: 12,
		element: {
		},
	},
	{
		label: "销售单价",
		prop: "c_sale_unit_price",
		type: "text",
		colSpan: 12,
		element: {
			precision: 2,
		},
	},
]

const dataItems = [
	{
		label: "销售日期",
		prop: "c_au_dt",
		type: "text",
		element: {
			mode: "YYYY-MM-DD HH:mm:ss",
		},
	},
	{
		label: "商品名称",
		prop: "c_gname",
		type: "text",
		element: {
		},
	},
	{
		label: "扣率",
		prop: "c_deduct_rate",
		type: "text",
		element: {
			precision: 2,
		},
	},
	{
		label: "销售金额",
		prop: "c_sale_amt",
		type: "text",
		element: {
			precision: 2,
		},
	},
	{
		label: "销售数量",
		prop: "c_sale_qty",
		type: "text",
		element: {
			precision: 0
		},
	},
	{
		label: "销售单价",
		prop: "c_sale_unit_price",
		type: "text",
		element: {
			precision: 2,
		},
	},
	{
		label: "",
		prop: "c_status",
		type: "tag",
		element: {
			type: "success",
			size: "mini",
			shape: "circle",
			plain: true,
		},
	}

]

</script>

<route lang="json">{
	"style": {
		"navigationBarTitleText": "DetailShow"
	}
}</route>

<template>
	<eui-page>
		<eui-page-content>
			<eui-sticky style="top: 0px; ">
				<eui-base-card title="基本用法">
					<eui-detail-show :items="dataItems" v-model="saleData"></eui-detail-show>
				</eui-base-card>
			</eui-sticky>
			<eui-base-card title="标题固定宽度">
				<eui-detail-show :items="dataItems" v-model="saleData" labelWidth="80px"></eui-detail-show>
			</eui-base-card>

			<eui-base-card title="内容居右">
				<eui-detail-show :items="dataItems" v-model="saleData" textAlign="right"></eui-detail-show>
			</eui-base-card>

			<eui-base-card title="标题显示冒号">
				<eui-detail-show :items="dataItems" v-model="saleData" :colon=true></eui-detail-show>
			</eui-base-card>

			<eui-base-card title="显示分隔线">
				<eui-detail-show :items="dataItems" v-model="saleData" :colon=true :borderBottom="true"></eui-detail-show>
			</eui-base-card>

			<eui-base-card title="一行两列">
				<eui-detail-show :items="datacolSpanItems" v-model="saleData"></eui-detail-show>
			</eui-base-card>

			<eui-base-card title="small size">
				<eui-detail-show :items="datacolSpanItems" v-model="saleData" size="small"></eui-detail-show>
			</eui-base-card>

			<eui-base-card title="little size">
				<eui-detail-show :items="datacolSpanItems" v-model="saleData" size="little"></eui-detail-show>
			</eui-base-card>

			<eui-base-card title="normal size">
				<eui-detail-show :items="datacolSpanItems" v-model="saleData" size="normal"></eui-detail-show>
			</eui-base-card>

			<eui-base-card title="large size">
				<eui-detail-show :items="datacolSpanItems" v-model="saleData" size="large"></eui-detail-show>
			</eui-base-card>
		</eui-page-content>
	</eui-page>
</template>

<style lang="scss"></style>